<script setup lang="ts">
/*
 * @description:
 * @fileName: AddEdit.vue
 * @params
 * @author: lxx
 * @date: 2025-07-08 20:56:56"
 * @version: V1.0.0
 */
import { dataSaveApi } from '@/api/system/dictItem'
import { useAddEdit } from '@/hooks/system/useFramework'
import type { ItemFormInt } from '@/api/system/dictItem/types'
import type { TagProps } from 'element-plus'
import constants  from '@/common/constant'

const route = useRoute()


// 标签类型
const tagType: TagProps['type'][] = ['primary', 'success', 'info', 'warning', 'danger']

// 表单数据Ref
const dataFormRef = ref()

const formData = ref<ItemFormInt>({
  id: -1,
  dictLabel: '',
  dictValue: '',
  dictCode: route.query.dictCode as string,
  status: 1,
  tagType: '',
  sort: 0,
  memo: ''
})

const { loading, dialog, open, handleSubmitClick, handleCloseDialog } = useAddEdit<ItemFormInt>(dataSaveApi, formData, dataFormRef)

const rules = {
  dictLabel: [{ required: true, message: '请输入字典项名称', trigger: 'blur' }],
  dictValue: [{ required: true, message: '请输入字典项值', trigger: 'blur' }]
}

defineExpose({
  open
})
</script>
<template>
  <!--字典弹窗-->
  <el-dialog v-loading="loading" v-model="dialog.visible" :title="dialog.title" width="500px" @close="handleCloseDialog">
    <el-form ref="dataFormRef" :model="formData" :rules="rules" label-width="100px">
      <el-form-item label="字典项名称" prop="dictLabel">
        <el-input v-model="formData.dictLabel" placeholder="请输入字典项名称" />
      </el-form-item>

      <el-form-item label="字典项值" prop="dictValue">
        <el-input v-model="formData.dictValue" placeholder="请输入字典项值" />
      </el-form-item>

      <el-form-item label="排序">
        <el-input-number v-model="formData.sort" controls-position="right" />
      </el-form-item>

      <el-form-item label="状态">    
        <Dict :code="constants.STATUS" v-model="formData.status" type="radio" />
      </el-form-item>
      <el-form-item>
        <template #label>
          <div class="flex-y-center">
            标签类型
            <el-tooltip>
              <template #content>回显样式，为空时则显示 '文本'</template>
              <el-icon class="ml-1 cursor-pointer">
                <QuestionFilled />
              </el-icon>
            </el-tooltip>
          </div>
        </template>
        <el-select v-model="formData.tagType" placeholder="请选择标签类型" clearable @clear="formData.tagType = ''">
          <template #label="{ value }">
            <el-tag v-if="value" :type="value">
              {{ formData.dictLabel ? formData.dictLabel : '字典标签' }}
            </el-tag>
          </template>
          <!-- <el-option label="默认文本" value="" /> -->
          <el-option v-for="type in tagType" :key="type" :label="type" :value="type">
            <div flex-y-center gap-10px>
              <el-tag :type="type">{{ formData.dictLabel ?? '字典标签' }}</el-tag>
              <span>{{ type }}</span>
            </div>
          </el-option>
        </el-select>
      </el-form-item>

      <el-form-item label="备注" prop="memo">
        <el-input v-model="formData.memo" type="textarea" placeholder="请输入备注" />
      </el-form-item>
    </el-form>

    <template #footer>
      <div class="dialog-footer">
        <el-button type="primary" @click="handleSubmitClick()">确 定</el-button>
        <el-button @click="handleCloseDialog()">取 消</el-button>
      </div>
    </template>
  </el-dialog>
</template>
<style lang="scss" scoped></style>
